<template>
  <view>
    <!-- 消息操作菜单 -->
    <view
      class="message-menu"
      v-if="isMessageMenuVisible"
      :style="menuStyle"
      @tap.stop
    >
      <view class="menu-items">
        <view class="menu-item" @tap="copyContent">
          <FeatherIcon name="copy" size="20" color="#333" />
          <text>复制</text>
        </view>
        <view class="menu-item" @tap="quoteMessage">
          <FeatherIcon name="message-square" size="20" color="#333" />
          <text>引用</text>
        </view>
      </view>
    </view>

    <!-- 点击空白处关闭菜单的遮罩 -->
    <view class="menu-mask" v-if="isMessageMenuVisible" @tap="close"></view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import FeatherIcon from "@/components/FeatherIcon.vue";

const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
  menuStyle: {
    type: Object,
    default: () => ({}),
  },
  message: {
    type: Object,
    default: null,
  },
  currentUser: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["close", "copy", "quote"]);

// 使用本地状态，响应外部传入的 isVisible
const isMessageMenuVisible = ref(props.isVisible);

// 监听 isVisible 属性变化
watch(
  () => props.isVisible,
  (newValue) => {
    console.log("[MessageMenu] isVisible 变化:", newValue);
    isMessageMenuVisible.value = newValue;
  },
  { immediate: true }
);

// 复制消息内容
const copyContent = () => {
  emit("copy", props.message);
};

// 引用消息
const quoteMessage = () => {
  emit("quote", props.message);
};

// 关闭菜单
const close = () => {
  emit("close");
};
</script>

<style lang="scss" scoped>
/* 消息操作菜单样式 */
.message-menu {
  position: fixed;
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.2);
  padding: 14rpx;
  z-index: 1000;
  min-width: 300rpx;
  max-width: 500rpx;
  animation: slideDown 0.2s ease-out;
}

.message-menu .menu-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.message-menu .menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14rpx 24rpx;
  font-size: 24rpx;
  color: #333;
  transition: all 0.2s;
  border-radius: 6rpx;
}

.message-menu .menu-item:active {
  background-color: #f0f0f0;
  transform: scale(0.95);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 菜单遮罩 */
.menu-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: transparent;
}
</style>
